<template>
  <div class="main">
    <div class="head">
      <div class="logo">
        <img src="@/assets/logo.png" alt="">
        <i>公众号管理助手</i>
      </div>
      <div v-if="!this.token">
        <a-button class="user-btn" type="danger" v-on:click="loginHandleClick">登录</a-button>
      </div>
      <div class="user" v-else>
        <div>
          欢迎你, {{this.userName}}
          <img :src="this.userAvatar" alt="" style="width: 38px; height: 38px; margin-left: 5px; border-radius: 50%">
        </div>
        <a-button class="user-btn" v-on:click="toUserHandleClick">我的后台</a-button>
        <a v-on:click="loginOutHandleClick">退出</a>
      </div>
    </div>
    <div class="content">
        

        <a-carousel arrows autoplay>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div>
            <img src="https://back-image.oss-cn-shenzhen.aliyuncs.com/webserve/banner.597041d2.jpg" alt="">
          </div>
          <div>
            <img src="https://back-image.oss-cn-shenzhen.aliyuncs.com/webserve/banner.597041d2.jpg" alt="">
          </div>
        </a-carousel>


    </div>






  </div>
</template>

<script>
import store from '@/store/index'
import storage from 'store'
import { mapGetters } from 'vuex'
import Qs from 'qs'
import axios from 'axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'


export default {
  name: 'Home',
  components: {
    
  },
  data () {
    return {
      isLogin: true,
      // 参数
      query: {}
    }
  },
  computed: {
    ...mapGetters(['userAvatar', 'userName', 'token'])
  },
  methods: {
    loginHandleClick () {
      this.$router.push({
        path: '/user/login'
      })
    },
    toUserHandleClick () {
      this.$router.push({
        path: '/public'
      })
    },
    loginOutHandleClick () {
      store.dispatch('Logout')
        .then(() => {
          this.$router.push({ name: 'login' })
        })
    },
    // 扫码微信登录进来 有code 获取用户信息 头像 名字
    getWxUserMsg (code) {
      // 扫码登录确定获取code 
      // code获取用户信息 第一次登录
      axios.get(`http://login.comeonfans.com/web/wxlogin?code=${code}`)
          .then(res => {
              if (res.data.msg === 'ok') {
                  store.dispatch('SetInfo', {
                    nickName: res.data.nickname,
                    avatar: res.data.headimgurl,
                    token: res.data.unionid
                  })
                  localStorage.setItem('jwt', res.data.jwt)
                  // _this.$router.push({name: 'home'})
                  window.location.replace("http://www.comeonfans.com")
              } else {
                // message.error('获取用户信息失败，请重新操作')
                // window.open('http://www.comeonfans.com/#/index','_self');
              }
          })
    },
    // 授权公众号 授权码绑定用户
    getAuthCodeAndMsg(auth_code, accesstoken) {
      // 所需参数 auth_code accesstoken
      axios.get(`http://login.comeonfans.com/web/authcodeBindApp?code=${auth_code}&uid=${accesstoken}`)
        .then(res => {
            console.log(res)
            // this.$router.push({ name: 'home' })
            window.location.replace("http://www.comeonfans.com")
            // 绑定成功后 可以获取用户信息
        })
    },
    getCodeHandleClick () {
        axios.get("http://login.comeonfans.com/web/authcode", {
            headers: {
            'Accept': 'application/json;application/json',
            'Content-Type': 'application/json;charset=UTF-8;'
            }
        })
            .then(res => {
                // console.log(res)
                if (res.status === 200 && res.data['msg'] === 'ok') {
                    window.open(res.data.url, "_blank");
                } else {
                    alert('err')
                }
                // console.log(res.data.url)
                
            })
    }
  },
  mounted: function() {
    axios.interceptors.request.use(config => {
        config.headers = {
            'Authorization': localStorage.getItem('jwt') ? localStorage.getItem('jwt') : null
        }
        return config
    }, err => {
        return Promise.reject(err)
    })

    
    // 获取参数
    const query = Qs.parse(location.search.substring(1))
    // 存在code 微信扫码登录进来.
    if (query.code) {
      this.getWxUserMsg(query.code)
    }
    if (query.auth_code && storage.get(ACCESS_TOKEN)) {
      this.getAuthCodeAndMsg(query.auth_code, storage.get(ACCESS_TOKEN))
    }
  }
}
</script>

<style lang="less" scoped>
  .main {
    position: relative;
    width: 80%;
    min-width: 640px;
    height: 100%;
    margin: 0 auto;
    .head {
      position: relative;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .logo {
        font-weight: 500;
      }
      .logo img {
        width: 65px;
        height: 65px;
        margin-right: 10px;
      }
      .user {
        position: relative;
        display: flex;
        align-items: center;
        .user-btn {
          margin: 0 20px;
        }
      }
      
    }
    .content {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      // img {
      //   width: 100%;
      //   max-width: 980px;
      //   max-height: 540px;
      // }
      /* For demo */
      /deep/ .ant-carousel {
        width: 100%
      }
      /deep/ .ant-carousel .slick-slide {
        text-align: center;
        width: 640px;
        height: 540px;
        // line-height: 540px;
        background: #364d79;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          // max-width: 980px;
          min-height: 540px;
        }
      }

      /deep/ .ant-carousel .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
      }
      /deep/ .ant-carousel .custom-slick-arrow:before {
        display: none;
      }
      /deep/ .ant-carousel .custom-slick-arrow:hover {
        opacity: 0.5;
      }

      /deep/ .ant-carousel .slick-slide h3 {
        color: #fff;
      }
    }
  }
  

  
</style>